<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页刮刮卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            width: 100%;
            text-align: center;
        }
        
        header {
            margin: 20px 0 30px;
            text-align: center;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 25px;
        }
        
        .scratch-container {
            position: relative;
            margin: 0 auto 30px;
            width: 400px;
            height: 300px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            overflow: hidden;
        }
        
        .prize-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
        }
        
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
            border-radius: 15px;
        }
        
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin-bottom: 25px;
        }
        
        .btn {
            padding: 12px 25px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
        }
        
        .progress-container {
            width: 400px;
            margin: 0 auto 20px;
            background: rgba(255, 255, 255, 0.2);
            height: 20px;
            border-radius: 10px;
            overflow: hidden;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #ff9966, #ff5e62);
            transition: width 0.5s ease;
            border-radius: 10px;
        }
        
        .prize-selector {
            margin-bottom: 20px;
        }
        
        .prize-selector select {
            padding: 10px 20px;
            border-radius: 50px;
            border: none;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
        }
        
        .prize-selector option {
            background: #6a11cb;
            color: white;
        }
        
        .result {
            font-size: 1.5rem;
            margin-top: 20px;
            min-height: 40px;
            font-weight: bold;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        .instructions {
            margin-top: 30px;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            max-width: 500px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .instructions h3 {
            margin-bottom: 10px;
        }
        
        footer {
            margin-top: 40px;
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        @media (max-width: 500px) {
            .scratch-container, .progress-container {
                width: 100%;
                max-width: 350px;
            }
            
            #canvas, .prize-image {
                width: 100%;
                height: 250px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>🎉 网页刮刮卡 🎉</h1>
            <p class="subtitle">刮开涂层，看看您赢得了什么奖品！</p>
        </header>
        
        <div class="prize-selector">
            <select id="prizeSelect">
                <option value="prize1">一等奖：iPhone 15 Pro</option>
                <option value="prize2">二等奖：AirPods Pro</option>
                <option value="prize3">三等奖：100元优惠券</option>
                <option value="prize4">四等奖：谢谢参与</option>
            </select>
        </div>
        
        <div class="scratch-container">
            <img class="prize-image" id="prizeImage" src="https://placehold.co/400x300/4c1d95/FFFFFF?text=Loading..." alt="奖品">
            <canvas id="canvas" width="400" height="300"></canvas>
        </div>
        
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        
        <div class="controls">
            <button class="btn" id="resetBtn">重新开始</button>
            <button class="btn" id="revealBtn">直接揭晓</button>
            <button class="btn" id="changeBtn">更换奖品</button>
        </div>
        
        <div class="result" id="result"></div>
        
        <div class="instructions">
            <h3>使用说明</h3>
            <p>在刮刮卡区域按住鼠标左键并移动（或触摸移动）来刮开涂层。</p>
            <p>刮开超过70%区域将自动显示奖品结果。</p>
        </div>
        
        <footer>
            <p>网页刮刮卡 © 2023 | 增强版</p>
        </footer>
    </div>

    <script>
        // 获取DOM元素
        const canvas = document.getElementById("canvas");
        const context = canvas.getContext("2d");
        const prizeImage = document.getElementById("prizeImage");
        const progressBar = document.getElementById("progressBar");
        const resetBtn = document.getElementById("resetBtn");
        const revealBtn = document.getElementById("revealBtn");
        const changeBtn = document.getElementById("changeBtn");
        const prizeSelect = document.getElementById("prizeSelect");
        const result = document.getElementById("result");
        
        // 奖品配置
        const prizes = {
            prize1: {
                image: "https://placehold.co/400x300/4c1d95/FFFFFF?text=iPhone+15+Pro",
                name: "一等奖：iPhone 15 Pro"
            },
            prize2: {
                image: "https://placehold.co/400x300/4c1d95/FFFFFF?text=AirPods+Pro",
                name: "二等奖：AirPods Pro"
            },
            prize3: {
                image: "https://placehold.co/400x300/4c1d95/FFFFFF?text=100元优惠券",
                name: "三等奖：100元优惠券"
            },
            prize4: {
                image: "https://placehold.co/400x300/4c1d95/FFFFFF?text=谢谢参与",
                name: "四等奖：谢谢参与"
            }
        };
        
        // 初始化变量
        let isScratching = false;
        let scratchedPixels = 0;
        let totalPixels = canvas.width * canvas.height;
        
        // 初始化刮刮卡
        function initScratchCard() {
            // 绘制灰色涂层
            context.fillStyle = "#888";
            context.fillRect(0, 0, canvas.width, canvas.height);
            
            // 添加涂层文字
            context.font = "bold 30px Arial";
            context.fillStyle = "#666";
            context.textAlign = "center";
            context.fillText("刮一刮", canvas.width / 2, canvas.height / 2);
            
            // 重置进度
            scratchedPixels = 0;
            updateProgress();
            
            // 隐藏结果
            result.textContent = "";
        }
        
        // 更新进度条
        function updateProgress() {
            const percentage = (scratchedPixels / totalPixels) * 100;
            progressBar.style.width = percentage + "%";
            
            // 如果刮开区域超过70%，自动显示结果
            if (percentage > 70) {
                revealPrize();
            }
        }
        
        // 计算已刮开的像素数量
        function calculateScratchedPixels() {
            const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            const pixels = imageData.data;
            let count = 0;
            
            // 遍历所有像素，计算透明像素数量
            for (let i = 3; i < pixels.length; i += 4) {
                if (pixels[i] === 0) {
                    count++;
                }
            }
            
            scratchedPixels = count;
            updateProgress();
        }
        
        // 显示奖品
        function revealPrize() {
            const selectedPrize = prizeSelect.value;
            result.textContent = `恭喜您获得了: ${prizes[selectedPrize].name}`;
            
            // 禁用刮擦
            isScratching = false;
        }
        
        // 更换奖品
        function changePrize() {
            const selectedPrize = prizeSelect.value;
            prizeImage.src = prizes[selectedPrize].image;
            initScratchCard();
        }
        
        // 处理鼠标事件
        function handleMouseDown(e) {
            isScratching = true;
            scratch(e);
        }
        
        function handleMouseMove(e) {
            if (isScratching) {
                scratch(e);
            }
        }
        
        function handleMouseUp() {
            isScratching = false;
            calculateScratchedPixels();
        }
        
        // 处理触摸事件
        function handleTouchStart(e) {
            e.preventDefault();
            isScratching = true;
            scratch(e.touches[0]);
        }
        
        function handleTouchMove(e) {
            e.preventDefault();
            if (isScratching) {
                scratch(e.touches[0]);
            }
        }
        
        function handleTouchEnd() {
            isScratching = false;
            calculateScratchedPixels();
        }
        
        // 刮开涂层
        function scratch(e) {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            // 使用橡皮擦模式
            context.globalCompositeOperation = "destination-out";
            context.beginPath();
            context.arc(x, y, 20, 0, Math.PI * 2);
            context.fill();
        }
        
        // 直接揭晓所有涂层
        function revealAll() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            scratchedPixels = totalPixels;
            updateProgress();
            revealPrize();
        }
        
        // 事件监听
        canvas.addEventListener("mousedown", handleMouseDown);
        canvas.addEventListener("mousemove", handleMouseMove);
        canvas.addEventListener("mouseup", handleMouseUp);
        canvas.addEventListener("mouseleave", handleMouseUp);
        
        canvas.addEventListener("touchstart", handleTouchStart);
        canvas.addEventListener("touchmove", handleTouchMove);
        canvas.addEventListener("touchend", handleTouchEnd);
        
        resetBtn.addEventListener("click", initScratchCard);
        revealBtn.addEventListener("click", revealAll);
        changeBtn.addEventListener("click", changePrize);
        prizeSelect.addEventListener("change", changePrize);
        
        // 初始化
        changePrize();
    </script>
</body>
</html>